/* ==========================
   Descendant combinator (espacio)
   Aplica a todos los <p> dentro de un <div> (sin importar la profundidad).
========================== */
div p {
  background-color: lightyellow;
  padding: 5px;
  margin-bottom: 5px;
}

/* ==========================
   Child combinator (>)
   Aplica solo a los <p> que son hijos directos de un <div>.
========================== */
div > p {
  background-color: lightgreen;
  padding: 5px;
  margin-bottom: 5px;
}

/* ==========================
   Adjacent sibling combinator (+)
   Aplica al primer <p> que viene inmediatamente después de un <div>.
========================== */
div + p {
  background-color: lightblue;
  padding: 5px;
  margin-bottom: 5px;
}

/* ==========================
   General sibling combinator (~)
   Aplica a todos los <p> que son hermanos de un <div>, sin importar si están separados por otros elementos.
========================== */
div ~ p {
  background-color: lightcoral;
  padding: 5px;
  margin-bottom: 5px;
}